<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
    <meta charset="UTF-8">
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" :placeholder="placeholderText" @focus="clearPlaceholder" @blur="resetPlaceholder">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                placeholderText: '请输入密码'  // 默认的提示文本
            };
        },
        methods: {
            // 在 JavaScript 和 Vue 中，event 是一个事件对象，它包含了与用户触发的事件（如点击、输入、鼠标移动等）相关的信息。
            // 当用户与页面元素进行交互时，事件对象会自动传递给事件处理函数。
            // 在你的代码中，clearPlaceholder(event) 中的 event 是输入框获得焦点时触发的 focus 事件的对象。它携带了当前事件的信息，主要属性如下：
            // event.target：指向触发事件的 DOM 元素。在这个例子中，event.target 就是用户点击的 <input> 元素。
            // event.type：事件类型，例如 focus、click 等。
            // event.preventDefault()：阻止默认行为的方法（在 focus 事件中通常不需要用它）
            //
            // event 是事件对象，包含了有关事件的信息。
            // event.target 是触发事件的元素，通过它可以操作该元素的属性。。

            clearPlaceholder(event) {
                // 当输入框获得焦点时，清除 placeholder
                event.target.placeholder = '';
            },
            resetPlaceholder(event) {
                // 当输入框失去焦点时，如果输入框为空，重置 placeholder
                if (event.target.value === '') {
                    event.target.placeholder = this.placeholderText;
                }
            }
        }
    });
</script>
</body>



